<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>群管理</title>
  <%@ include file="/WEB-INF/view/common/includ-css.jsp" %>
</head>
<body class="gray-bg">
<div class="row wrapper border-bottom white-bg">
  <div class="col-sm-12">
    <div class="ibox float-e-margins" style="margin-bottom: 0px;">
      <div class="ibox-title">
        <h5>查询条件</h5>
        <div class="ibox-tools">
          <a class="collapse-link">
            <i class="fa fa-chevron-up"></i>
          </a>
        </div>
      </div>
      <div class="ibox-content">
        <form class="form-inline">
          <div class="form-group">
            <label class="font-normal">群名ID：</label>
            <input type="text" id="id" name="id"/>
          </div>
          <div class="form-group">
            <label class="font-normal">群名称：</label>
            <input type="text" id="groupName" name="groupName"/>
          </div>
          <div class="form-group">
            <label class="font-normal">群状态：</label>
            <select class="form-control" id="status">
              <option value="-1">全部</option>
              <option value="0">禁用</option>
              <option value="1">启用</option>
            </select>
          </div>
          <input type="hidden" id="statusInput"/>
          <button type="button" class="btn btn-white btn-info btn-round" style="margin-bottom: 0px;" id="query">
            <i class="ace-icon fa fa-search bigger-120 blue"></i>查询
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-sm-4">
    <h2>群管理</h2>
  </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">

        <div class="ibox-content">
          <table id="dataTables" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
              <th>ID</th>
              <th>名称</th>
              <th>图片</th>
              <th>群人数</th>
              <th>状态</th>
              <th>是否被封</th>
              <th>是否需要审核</th>
              <th>是否开启全员禁言</th>
              <th>是否开启群成员保护</th>
              <th>最大人数</th>
              <th>创建人</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<%@ include file="/WEB-INF/view/common/includ-js.jsp" %>
<!-- Data Tables -->
<script src="${path}/static/Hui/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${path}/static/Hui/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="${path}/static/plugins/layui/layui.all.js"></script>
<script src="../../static/lib/layui/layui.js"></script>
<script>
  $(function(){

    // 关闭错误提示
    $.fn.dataTable.ext.errMode = 'none';

    // 数据表格
    var tables = $("#dataTables").dataTable({
      paging:true,
      serverSide: true,
      searching: false,
      ordering:  false,
      processing: false,
      "lengthMenu": [10, 20, 50, 100],
      pageLength: 20,
      lengthChange: true,
      "ajax":{
        url:"/group/list",
        type:"post",
        data: function (d) {
          d.groupName=$("#groupName").val(),
          d.status=$("#status").val(),
          d.id=$("#id").val()
        }
      },
      columns: [
        { "data": "id" },
        { "data": "name" },
        { "data": "pic" },
        { "data": "userCount" },
        { "data": "status" },
        { "data": "is_freeze" },
        { "data": "is_audit" },
        { "data": "is_banned" },
        { "data": "is_member_protect" },
        { "data": "max_person" },
        { "data": "nickName" },
        { "data": "create_time" },
        { "data": "id" },
      ],
      columnDefs: [
        {
          "render": function(data, type, row, meta) {
            var html =data;
            if(!row.isPay){
              return '<dev style="color: red;">'+data+'</i></dev>';
            }
            return html;
          },
          "targets": 1
        },
        {
          "render": function(data, type, row, meta) {
            var html ='暂无图片';
            if(data!=null && data!=''){
              html = '<img src="'+data+'" style="height: 40px;"/>';
            }
            return html;
          },
          "targets": 2
        },
        {
          "render": function(data, type, row, meta) {
            if(!data){
              return "删除";
            }
            if(data){
              return "启用";
            }
            return html;
          },
          "targets": 4
        },
        {
          "render": function(data, type, row, meta) {
            if(!data){
              return "正常";
            }
            if(data){
              return "禁用";
            }
            return html;
          },
          "targets": 5
        },
        {
          "render": function(data, type, row, meta) {
            if(data){
              return "是";
            }
            return "否";
          },
          "targets": 6
        },
        {
          "render": function(data, type, row, meta) {
            if(data){
              return "是";
            }
            return "否";
          },
          "targets": 7
        },
        {
          "render": function(data, type, row, meta) {
            if(data){
              return "是";
            }
            return "否";
          },
          "targets": 8
        },
        {
          "render": function(data, type, row, meta) {
            if(data!=null && data!=''){
              return data.substring(0,19)
            }
            return "无";
          },
          "targets": 11
        },
        {
          "render": function(data, type, row, meta) {
            var html = '<div class="action-buttons">';
            html += '<a href="javascript:void(0)" onclick="updateName(' + row.id + ',0)"><i style="font: normal normal normal 14px/1 FontAwesome;">修改名称</i></a>';
            html += '<a href="/group/user/index?groupId='+row.id+'" ><i style="font: normal normal normal 14px/1 FontAwesome;">群人员</i></a>';
            if(!row.is_freeze){
              html += '<a href="javascript:void(0)" onclick="updateStatus(' + row.id + ',1)" class="blue" title="禁用"><i class="ace-icon fa fa-pencil bigger-130">禁用</i></a>';
            }
            if(row.is_freeze){
              html += '<a href="javascript:void(0)" onclick="updateStatus(' + row.id + ',0)" class="blue" title="解禁"><i class="ace-icon fa fa-pencil bigger-130">解禁</i></a>';
            }
            if(row.status==1){
                html += '<a href="javascript:void(0)" onclick="delGroup(' + row.id + ')" class="blue" title="解散" ><i style="font: normal normal normal 14px/1 FontAwesome;">解散</i></a>';
            }
            html += '<a href="javascript:void(0)" onclick="uploadImg(' + row.id + ',\'' + row.pic + '\')" ><i style="font: normal normal normal 14px/1 FontAwesome;">修改头像</i></a>';
            html += '<a href="javascript:void(0)" onclick="uploadUser(' + row.id + ',' + row.max_person + ')" ><i style="font: normal normal normal 14px/1 FontAwesome;">修改人数</i></a>';
            html += '</div>';
            return html;
          },
          "targets": 12
        }
      ]
    });
    $("#query").click(function(){
      tables.dataTable().fnDraw();
    });

  });

  function updateStatus(id,status){
    layer.confirm("是否关闭群", function (e) {
      var index = layer.load(2);
      $.ajax({
        type:"post",
        url:"${path}/group/update/status",
        dataType:"json",
        data:{id:id,status:status},
        success:function(data){
          layer.close(index);
          if(data.code ==0){
            layer.alert(data.msg,{icon:1}, function(){
              location.reload();
            });
          }else{
            layer.alert(data.msg,{icon:2});
          }
        },
        error:function (data) {
          layer.close(index);
        }
      });
    });
  }
  function delGroup(id){
      layer.confirm("是否解散群", function (e) {
          var index = layer.load(2);
          $.ajax({
              type:"post",
              url:"${path}/group/del",
              dataType:"json",
              data:{id:id},
              success:function(data){
                  layer.close(index);
                  if(data.code ==0){
                      layer.alert(data.msg,{icon:1}, function(){
                          location.reload();
                      });
                  }else{
                      layer.alert(data.msg,{icon:2});
                  }
              },
              error:function (data) {
                  layer.close(index);
              }
          });
      });
  }
  function updateName(id){
    layer.open({
      type: 1,
      shade: 0.8,
      offset: 'auto',
      shadeClose: true,//点击外围关闭弹窗
      scrollbar: false,//不现实滚动条
      title: "群名称修改", //不显示标题
      area: ['20%', '20%'],
      content: "<div style='display:flex;justify-content:center;'>" +
              "<textarea id='name' style='width:80%;height:60px;margin-top: 8px'></textarea>" +
              "</div>",
      btn: ['确定', '取消'] ,//只是为了演示
      btnAlign:'c',
      yes: function(){
        if($("#name").val()==""){
          layer.alert("请填写名称",{icon:2});
        }
        $.ajax({
          type:"post",
          url:"${path}/group/update/name",
          dataType:"json",
          data:{id:id,name:$("#name").val()},
          success:function(data){
            if(data.code ==0){
              layer.alert(data.msg,{icon:1}, function(){
                location.reload();
              });
            }else{
              layer.alert(data.msg,{icon:2});
            }
          },
          error:function (data) {
            layer.close(index);
          }
        });
      },
    });
  }
  function uploadImg(id,pic){
    layer.open({
      type: 1,
      shade: 0.8,
      offset: 'auto',
      shadeClose: true,//点击外围关闭弹窗
      scrollbar: false,//不现实滚动条
      title: "群名称修改", //不显示标题
      area: ['40%', '40%'],
      content: "<div style='display:flex;justify-content:center;'>" +
              '<div class="layui-col-md3 layui-col-lg3 text-center tmm-right-logo">'+
              '<img class="org_logo" src="'+pic+'" id="logoImg"/>'+
              '<input type="hidden" name="cover_pic" id="cover_pic" value="'+pic+'">'+
              '<div>封面图</div>'+
              '</div>'+
              "</div>",
      btn: ['确定', '取消'] ,//只是为了演示
      btnAlign:'c',
      yes: function(){

      },
    });
  }

  function uploadUser(id,number){
    layer.open({
      type: 1,
      shade: 0.8,
      offset: 'auto',
      shadeClose: true,//点击外围关闭弹窗
      scrollbar: false,//不现实滚动条
      title: "人数修改", //不显示标题
      area: ['40%', '15%'],
      content: "<div style='display:flex;justify-content:center;'>" +
              '<div class="layui-col-md3 layui-col-lg3 text-center tmm-right-logo">'+
              '<input type="text" name="number" id="number" value="'+number+'">'+
              '</div>'+
              "</div>",
      btn: ['确定', '取消'] ,//只是为了演示
      btnAlign:'c',
      yes: function(){
        if($("#number").val()=="" || $("#number").val()==0){
          layer.alert("请填人数",{icon:2});
        }
        $.ajax({
          type:"post",
          url:"${path}/group/update/user/number",
          dataType:"json",
          data:{id:id,number:$("#number").val()},
          success:function(data){
            if(data.code ==0){
              layer.alert(data.msg,{icon:1}, function(){
                location.reload();
              });
            }else{
              layer.alert(data.msg,{icon:2});
            }
          },
          error:function (data) {
            layer.close(index);
          }
        });
      },
    });
  }
  layui.laydate.render({
    elem: "#logoImg"
    ,url: '${path}/upload/uploadFile'
    ,data:{uploadUrl:"goods/"}
    ,size: 2048 //限制文件大小，单位 KB
    ,done: function(data,index,upload){
      if(data.code!=0){
        layer.msg('上传失败', {
          offset: '200px'
          ,icon: 2
          ,time: 1000
          ,anim:4
        }, function(){});
        return;
      }else{
        layer.msg('上传成功', {
          offset: '200px'
          ,icon: 1
          ,time: 1000
          ,anim:4
        }, function(){});
        $(this.item[0]).attr("src",data.data);
        $("#cover_pic").val(data.data);
      }
    }
  });
  //删除图片
  function delPic(x) {
    x.parentNode.parentNode.remove();
  }

</script>
</body>
</html>
